<template>
    <div class="i-quill" :class="classes">
        <div class="i-quill-icon">
            <Row style="position: relative;">
                <Col style="position:static">
                <Icon type="md-happy" @click="emoji = true" size="24" ></Icon>
                <div v-if="emoji" style="position: absolute;right: 0;left: -10px;bottom: 30px;height:100px;overflow:auto;background:#fff;z-index: 10">
                    <div v-for="(item, index) in qqFaceMap" class="qq-face-map" :class="`qq-face-map-${index}`" @click="addvalue(item)" :title="item" :key="index"></div>
                </div>
                </Col>
                <Col>
                <Upload :action="uploadUrl" multiple name="myfile" class="ivu-ml-8 ivu-mr-8" :format="['jpg', 'png', 'gif', 'jpeg']" accept=".jpg, .png, .gif, .jpeg" :show-upload-list="false" :on-success="successupload" :on-error="errorupload">
                    <Icon type="md-photos" size="24" ></Icon>
                </Upload>
                </Col>
                <Col style="position:static">
                <!-- <Icon type="md-chatboxes" @click="openquickReply" size="24" /> -->
                <div v-if="quickReply" style="position: absolute;right: 0;left: -10px;bottom: 30px;height:200px;overflow:auto;background:#fff;z-index: 10">
                    <div v-for="item in data" :key="item.id">
                        <div class="ivu-mt-8">
                            <span @click="item.show = !item.show" v-if="!item.show">
                                <Icon type="ios-arrow-forward" ></Icon>
                            </span>
                            <span @click="item.show = !item.show" v-else>
                                <Icon type="ios-arrow-down" ></Icon>
                            </span>
                            <span>{{item.name}}</span>
                        </div>
                        <div class="ivu-ml-8 ivu-mt-8" :key="`${item.id}s`" v-if="item.show">
                            <div v-for="items in item.list" class="ivu-ml-8 ivu-mt-8" :key="items.id">
                                <span @click="items.show = !items.show" v-if="!items.show">
                                    <Icon type="ios-arrow-forward" ></Icon>
                                </span>
                                <span @click="items.show = !items.show" v-else>
                                    <Icon type="ios-arrow-down" ></Icon>
                                </span>
                                <span>{{items.group_name}}</span>
                            </div>
                            <div class="ivu-ml-8 ivu-mt-8" :key="`${items.id}s`" v-if="items.show">
                                <div v-for="iteming in items.replyList" class="ivu-ml-16 ivu-mt-8" :key="iteming.id">
                                    <span @click="addvalue(iteming.content)">{{iteming.content}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </Col>
            </Row>
        </div>
        <div v-if="emoji" style="position: fixed;top:0;right: 0;left: 0;bottom: 0;z-index: 9" @click="emoji = false"></div>
        <!-- <div v-if="quickReply" style="position: fixed;top:0;right: 0;left: 0;bottom: 0;z-index: 9" @click="quickReply = false"></div> -->
        <div ref="editor" :style="styles"></div>
        <div class="i-quill-btn">
            <span style="color:#999;font-size:10px;padding-right:8px">Enter发送，Shift+Enter换行</span>
            <Button @click="$emit('submitwechat')">发送</Button>
        </div>
    </div>
</template>

<script>
    import Quill from 'quill';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import Setting from '@/setting';
    // import util from '@/libs/util';

    export default {
        name: 'i-quill',
        props: {
            value: {
                type: String,
                default: ''
            },
            border: {
                type: Boolean,
                default: false
            },
            height: {
                type: Number
            },
            minHeight: {
                type: Number
            }
        },
        data() {
            return {
                Quill: null,
                currentValue: '',
                options: {
                    theme: 'snow',
                    bounds: document.body,
                    debug: 'warn',
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            [{ header: [1, 2, 3, 4, 5, 6, false] }],
                            [{ size: ['small', false, 'large', 'huge'] }],
                            [{ color: [] }, { background: [] }],
                            ['blockquote', 'code-block'],
                            [{ list: 'ordered' }, { list: 'bullet' }],
                            // [{ 'script': 'sub' }, { 'script': 'super' }],
                            [{ indent: '-1' }, { indent: '+1' }],
                            [{ align: [] }],
                            [{ direction: 'rtl' }],
                            // [{ 'font': [] }],
                            ['clean'],
                            ['link', 'image']
                        ],
                        keyboard: {
                            bindings: {
                                custom: {
                                    key: 13,
                                    shiftKey: true,
                                    format: ['list'],
                                    handler: (range, context) => {
                                    }
                                },
                                customs: {
                                    key: 13,
                                    ctrlKey: true,
                                    format: ['list'],
                                    handler: (range, context) => {
                                    }
                                },
                                enter: {
                                    key: 13,
                                    format: { list: false },
                                    handler: (range, context) => {
                                        this.$emit('submitwechat');
                                    }
                                }
                            }
                        }
                    },
                    placeholder: '内容...',
                    readOnly: false
                },
                uploadUrl: Setting.uploadUrl,
                emoji: false,
                qqFaceMap: [
                    '[微笑]', '[撇嘴]', '[色]', '[发呆]', '[得意]', '[流泪]', '[害羞]',
                    '[闭嘴]', '[睡]', '[大哭]', '[尴尬]', '[发怒]', '[调皮]', '[呲牙]',
                    '[惊讶]', '[难过]', '[酷]', '[囧]', '[抓狂]', '[吐]', '[偷笑]',
                    '[可爱]', '[白眼]', '[傲慢]', '[饥饿]', '[困]', '[惊恐]', '[流汗]',
                    '[憨笑]', '[大兵]', '[奋斗]', '[咒骂]', '[疑问]', '[嘘]', '[晕]',
                    '[折磨]', '[衰]', '[骷髅]', '[敲打]', '[再见]', '[擦汗]', '[抠鼻]',
                    '[鼓掌]', '[糗大了]', '[坏笑]', '[左哼哼]', '[右哼哼]', '[哈欠]', '[鄙视]',
                    '[委屈]', '[快哭了]', '[阴险]', '[亲亲]', '[吓]', '[可怜]', '[菜刀]',
                    '[西瓜]', '[啤酒]', '[篮球]', '[乒乓]', '[咖啡]', '[饭]', '[猪头]',
                    '[玫瑰]', '[凋谢]', '[嘴唇]', '[爱心]', '[心碎]', '[蛋糕]', '[闪电]',
                    '[炸弹]', '[刀]', '[足球]', '[瓢虫]', '[便便]', '[月亮]', '[太阳]',
                    '[礼物]', '[拥抱]', '[强]', '[弱]', '[握手]', '[胜利]', '[抱拳]',
                    '[勾引]', '[拳头]', '[差劲]', '[爱你]', '[NO]', '[OK]', '[爱情]',
                    '[飞吻]', '[跳跳]', '[发抖]', '[怄火]', '[转圈]', '[磕头]', '[回头]',
                    '[跳绳]', '[投降]', '[激动]', '[乱舞]', '[献吻]', '[左太极]', '[右太极]'
                ],
                quickReply: false,
                departmentValue: '',
                departmentQuickReplyList: [{ value: 1, label: 1 }],
                personalValue: '',
                personalQuickReplyList: [{ value: 1, label: 1 }]
                // data: []
            };
        },
        computed: {
            classes() {
                return [
                    {
                        'i-quill-no-border': !this.border
                    }
                ];
            },
            styles() {
                let style = {};
                if(this.minHeight) {
                    style.minHeight = `${this.minHeight}px`;
                }
                if(this.height) {
                    style.height = `${this.height}px`;
                }
                return style;
            }
        },
        watch: {
            value: {
                handler(val) {
                    if(val !== this.currentValue) {
                        this.currentValue = val;
                        if(this.Quill) {
                            this.Quill.pasteHTML(this.value);
                        }
                    }
                },
                immediate: true
            }
        },
        methods: {
            init() {
                const editor = this.$refs.editor;
                // 初始化编辑器
                this.Quill = new Quill(editor, this.options);
                // 默认值
                this.Quill.pasteHTML(this.currentValue);
                // 绑定事件
                this.Quill.on('text-change', (delta, oldDelta, source) => {
                    const html = this.$refs.editor.children[0].innerHTML;
                    const text = this.Quill.getText();
                    const quill = this.Quill;
                    // 更新内部的值
                    this.currentValue = html;
                    // 发出事件 v-model
                    this.$emit('input', html);
                    // 发出事件
                    this.$emit('on-change', { html, text, quill });
                });
                // 将一些 quill 自带的事件传递出去
                this.Quill.on('text-change', (delta, oldDelta, source) => {
                    this.$emit('on-text-change', delta, oldDelta, source);
                });
                this.Quill.on('selection-change', (range, oldRange, source) => {
                    this.$emit('on-selection-change', range, oldRange, source);
                });
                this.Quill.on('editor-change', (eventName, ...args) => {
                    this.$emit('on-editor-change', eventName, ...args);
                });
            },
            addvalue(item) {
                let str = this.value.replace(/<\/?.+?>/g, '');
                this.value = `${str}${item}`;
                this.quickReply = false;
                this.emoji = false;
            },
            successupload(response, file, fileList) {
                this.$emit('successupload', response.data.url);
            },
            errorupload() {
                this.$Message.error({
                    background: true,
                    content: '发送图片失败'
                });
            },
            handleCreateDepartment() { },
            handleCreatePersonal() { }
            // openquickReply () {
            //     this.data = util.storage.get('quickreply')
            //     this.quickReply = true
            // }
        },
        mounted() {
            this.init();
        },
        beforeDestroy() {
            // 在组件销毁后销毁实例
            this.Quill = null;
        }
    };
</script>
<style lang="less">
.i-quill-no-border {
    position: relative;
    .ql-toolbar.ql-snow {
        border: none;
        border-bottom: 1px solid #e8eaec;
        display: none;
    }
    .ql-container.ql-snow {
        min-height: 118px;
        border: none;
    }
    @media only screen and (min-width:2560px) {
      .ql-container.ql-snow {
        min-height: 520px;
        border: none;
    }
    }
    .i-quill-btn {
        // position: absolute;
        // bottom: 10px;
        // right: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .i-quill-icon {
        margin-top: 10px;
        margin-left: 10px;
    }
}
</style>
